<template>
	<view class="bgf5">
		<navBar :placeholder="true" title="账户详情">
			<view class="flex_x">
				<u-icon name="kefu-ermai" color="#767C82" size="26"></u-icon>
				<image class="ml20" style="width: 40rpx;height: 8rpx;" src="@/static/detail/ddd.png" mode=""></image>
			</view>
		</navBar>
		<view class="box_shadow br14 m2430 pr pt40 pl40 pb28 bgf">
			<view class="cf fs22 pa cb8 flex_c">
				<image src="../../static/detail/star.png" class="img24 mr10" mode=""></image>
				默认账户
			</view>
			<view class="flex_x">
				<image src="../../static/my/bg1.png" class="icon_card br14" mode=""></image>
				<view class="ml20">
					<view class="fs28 fw550 mb10">
						上海 借记卡(I类)
					</view>
					<view class="flex_x">
						<view class="fs22 fw550">
							6222****1479
						</view>
						<view class="c3e fs22">
							查看
						</view>
					</view>
				</view>
			</view>
			<view class="mt60 c6 fs20">
				柜面注册
			</view>
		</view>
		<view class="p4032 fs26 fw550 bgf box_shadow mb24">
			<view class="flex_btw">
				<view class="">人民币余额</view>
				<view class="">90，957，505.30</view>
			</view>
			<view class="cut_line mtb24"></view>
			<view class="flex_btw">
				<view class="">人民币可用余额</view>
				<view class="">0.00</view>
			</view>
		</view>
		<view class="box_shadow bgf pb20 mb24">
			<view class="flex_wrap flex1">
				<view class="flex_col_c flex25" v-for="item in menuList3" :key="item.image">
					<image class="" :style="[item.imgSty]" :src="item.image"></image>

					<view class="fs26 mt20">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="box_shadow bgf plr30">
			<view class="flex_btw ptb38">
				<view class="fs24 fw550">
					基本账户
				</view>
				<view class="flex_x">
					<view class="fs20">
						2102****1119
					</view>
					<image src="../../static/detail/right.png" mode="" class="ml30 icon_right"></image>
				</view>
			</view>
			<view class="cut_line">

			</view>
			<view class="flex_btw ptb38">
				<view class="fs24 fw550">
					启用日期
				</view>
				<view class="flex_x">
					<view class="fs20">
						2018年04月12日
					</view>

				</view>
			</view>
			<view class="cut_line">

			</view>
			<view class="flex_btw ptb38">
				<view class="fs24 fw550">
					到期日期
				</view>
				<view class="flex_x">
					<view class="fs20">
						2027年11月
					</view>

				</view>
			</view>
			<view class="cut_line">

			</view>
			<view class="flex_btw ptb38">
				<view class="fs24 fw550">
					密码管理
				</view>
				<image src="../../static/detail/right.png" mode="" class=" icon_right"></image>
			</view>
			<view class="cut_line">

			</view>
			<view class="flex_btw ptb38">
				<view class="fs24 fw550">
					设置别名
				</view>
				<view class="flex_x">
					<view class="fs20 c6">
						此卡别名
					</view>
					<image src="../../static/detail/right.png" mode="" class="ml30 icon_right"></image>
				</view>
			</view>
			<view class="cut_line">

			</view>
		</view>
	</view>
</template>

<script>
	import {
		menuList3
	} from './data.js'
	export default {
		data() {
			return {
				menuList3
			}
		},
		onLoad() {},
		onShow() {

		},
		methods: {

		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.box_shadow {
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
	}

	.fs28 {
		font-size: 28rpx;
	}

	.fs20 {
		font-size: 20rpx;
	}

	.cb8 {
		background-color: #B84123;
		width: 155rpx;
		height: 45rpx;
		top: 0;
		right: 0;
		border-radius: 0 14rpx 0 14rpx;
	}

	.icon_card {
		width: 106rpx;
		height: 78rpx;
	}

	.icon_right {
		width: 11rpx;
		height: 18rpx;
	}

	.c3e {
		margin-left: 92rpx;
		color: #3E71CD;
	}

	.flex25 {
		flex: 0 0 25%;
		height: 178rpx;
	}
</style>